<template>
  <div class="xie-line">
    <div class="center-line"></div>
    <div class="end-line"></div>
  </div>
</template>
<style lang="less" scoped>
.xie-line {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: flex-start;
  position: relative;

  .center-line {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    width: 200px;
    height: 20px;
    background-color: #ec3b58;
    position: relative; // 添加相对定位
    z-index: 2; // 确保在上层
    clip-path: polygon(
      0 0,
      100% 0,
      calc(100% - 12px) 100%,
      0 100%
    ); // 减小斜切距离
  }

  .end-line {
    flex: 1;
    height: 20px;
    background-color: #4b5162;
    position: relative; // 添加相对定位
    margin-left: -8px; // 添加负边距来减少间隙
    z-index: 1; // 确保在下层
    clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); // 减小斜切起始点
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
}
</style>
